<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领养中心</title>
    <link rel="stylesheet" href="css/adopt.css">
    <script src="js/vue.js"></script>
    <script src="js/cdn.axios.js"></script>
</head>
<body>
<div id="root">
    <!-- 导航栏部分 -->
    <div class="nav">
        <ul class="leftnav">
            <li class="btli"><a href="index.html">主页</a></li>
            <li class="btli xiala"><a href="#">宠物知识</a>
                <ul class="droplist">
                    <li><a href="knowledge_one.html">领养须知</a></li>
                    <li><a href="knowledge_two.html">宠物医疗</a></li>
                    <li><a href="knowledge_three.html">饲养百科</a></li>
                </ul>
            </li>
            <li class="btli"><a href="adopt.html">领养中心</a></li>
        </ul>
        <ul class="rightnav">
            <li class="rbtli login"><a href="login.html" v-show="login">登录</a></li>
            <li class="rbtli logout chu"><span @click="del" v-show="logout">登出</span></li>
            <li class="rbtli logout">
                <span id="user" class="chu" v-show="logout">{{name}}</span>
            </li>
        </ul>
    </div>
    <h1 class="center">欢迎来到领养中心</h1>
    <!-- 宠物卡片 -->
    <div class="container">
        <div class="card" style="--clr:#009688;" v-for="(pet,i) in pets">
            <div class="imgBx">
                <img src="../images/1.jpg">
            </div>
            <div class="content">
                <h2>{{pet.petname}}</h2>
                <div class="introduce">
                    <div>编号 <span>{{i}}</span></div>
                    <div>品种 <span>{{pet.species}}</span></div>
                    <div>性别 <span>{{pet.gender}}</span></div>
<!--                    <div>生日 <input type="date" name="trip-start" value="2003-3-11"></div>-->
                    <div>生日 <span>{{pet.birthday}}</span></div>
                    <div>领养状态：
                        <span v-if="pet.state===0">未被领养</span>
                        <span v-if="pet.state===1">已被申请领养</span>
                        <span v-if="pet.state===2">已领养</span>
                    </div>
                </div>
                <a href="#" @click="showUpdate(pet.id)">想要领养</a>
            </div>
        </div>
    </div>
    <!-- 新增模态框部分 -->
    <template v-if="updateShow">
        <div class="modal">
            <div class="modal-header">
                <p class="title" >请确认个人信息</p>
                <p class="close" @click="close">×</p>
            </div>
            <form class="modal-content">
                <label><span>领养人</span> <input type="text" id="nickname"></label>
                <label><span>宠物名</span> <input type="text" id="petName"></label>
                <label><span>性别</span>
                    <select value="男">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </label>
                <label><span>电话</span> <input type="text" id="phoneNum"></label>
                <label><span>邮件</span> <input type="text" id="email"></label>
                <label><span>地址</span> <input type="text" id="address"></label>
            </form>
            <div class="modal-footer">
                <button class="close btn" @click="close">关闭</button>
                <button class="btn" @click="submit">提交申请</button>
            </div>
        </div>
    </template>
    <template v-if="flag">
        <div class="mask"></div>
    </template>
</div>
<!--<script src="js/login.js"></script>-->
<script>

    const {createApp} = Vue;
    createApp({
        data() {
            return {
                pets:new Map(),
                updateShow:false,
                flag:false,
                pageSize:20,
                p:new Map(),
                login:true,
                logout:false,
                name:"",
                userid:0,
                petid:0,
            }
        },
        created() {
          const that = this;
          this.userid=JSON.parse(localStorage.getItem('userid'));
          this.name = JSON.parse(localStorage.getItem('nickname'));
          axios({
            method:"get",
            url:"/pet/getpets?pageSize="+this.pageSize+"&state=unadopt",
          }).then(function (res) {
            that.pets = res.data.page.pageContentList;
            console.log(res.data.page.pageContentList);
          });
            this.judge();


        },
        methods: {

            judge() {
                if (this.name) {
                    this.login = false;
                    this.logout  = true;
                } else {
                    this.login = true;
                    this.logout  = false;
                }
            },

            showUpdate(id) {
                if(JSON.parse(localStorage.getItem('nickname'))) {
                    const that = this;
                    this.updateShow = true;
                    this.flag = true;
                    axios({
                        method: "get",
                        url:"/pet/getpetbyid?pid="+id,
                        contentType: 'application/json',
                    }).then(function (res) {
                        if (res.data.code===200) {
                            that.p = res.data.contentList[0];
                            that.petid = res.data.contentList[0].id;
                            console.log(res.data.contentList[0])
                            document.getElementById('nickname').value=JSON.parse(localStorage.getItem('nickname'));
                            document.getElementById('petName').value=res.data.contentList[0].petname;
                            document.getElementById('phoneNum').value=JSON.parse(localStorage.getItem('phoneNum'));
                            document.getElementById('email').value=JSON.parse(localStorage.getItem('email'));
                            document.getElementById('address').value=JSON.parse(localStorage.getItem('address'));

                        }
                    })
                } else {
                    alert("请先登录");
                }
            },
            close(){
                this.updateShow = false
                this.flag = false;
            },

            submit() {
                const that = this;
                axios({
                    method: "post",
                    url:"/adoptrequest/regrequest",
                    contentType: 'application/json',
                    data:{
                        "userId":this.userid,
                        "petId":this.petid,
                    }
                }).then(function (res) {
                    console.log("success")
                    that.close();
                })
            },

            del() {
                localStorage.clear();
                this.judge();
                location.reload();
            },

        }
    }).mount("#root")

    // js部分

</script>
</body>
</html>